<template>
  <u-modal v-model="showModal"
           :show-cancel-button="cancel"
           @confirm="submit()"
           :mask-close-able="close"
           :confirm-style="style"
           :confirm-color="color"
           :title="title"
           :cancel-style="CanelStyle"
           :show-title="titleShow"
           ref="uModal"
           :async-close="true"
           :content="item">
    <view class="slot-content">
      <view  v-if="title != '核销'">
        <view class="input u-margin-top-40 u-flex flex_bt" @click="TransferOrderShow = true">
          <view>{{head}}</view>
          <view>
            <u-icon name="arrow-down-fill"  color="#45806E" size="24"></u-icon>
          </view>
        </view>
        <view class="input u-margin-top-40">
          <u-input v-model="code" placeholder="请输入物流单号" type="text" :border="false" :height="88" />
        </view>
      </view>
      <view class="input u-margin-top-40  " v-else>
        <u-input v-model="number" placeholder="请输入核销码" type="text" :border="false" :height="88" />
      </view>
      <view class="u-flex flex_j_c item" >{{item}}</view>
      <view class="cha" @click.stop="closes">x</view>
      <!--转单选择-->
      <u-picker mode="selector" :title="'请选择物流'" :range="list" v-model="TransferOrderShow" @confirm="confirm" range-key="ename"></u-picker>
    </view>
  </u-modal>

</template>

<script>
export default {
  name: "orderDeliver",
  data(){
    return{
      showModal:true,
      TransferOrderShow:false,
      number:'',
      form:{},
      code:'',
      head:'选择物流',
      index:-1,
      selectorObj: [
        {
          cateName: '1',
          id: 1
        },
        {
          cateName: '2',
          id: 2
        }
      ],
    }
  },
  props:{
    //内容
    item: {
      type: String,
      default: ''
    },
    //选择数据列表
    list: {
      type: Array,
      default: []
    },
    //标题是否显示
    cancel: {
      type: Boolean,
      default: false
    },
    //标题是否显示
    titleShow: {
      type: Boolean,
      default: true
    },
    //是否遮罩层可以关闭
    close: {
      type: Boolean,
      default: false
    },
    //按钮颜色
    color:{
      type: String,
      default: '#45806E'
    },
    //标题
    title:{
      type: String,
      default: '标题'
    }
  },
  computed:{
    style(){
      return {
        width: '232rpx',
        height: '72rpx',
        background: '#45806E',
        borderRadius: '58rpx',
        color:'#fff',
        lineHeight:'72rpx',
        margin:'0 auto',
        marginBottom:'50rpx',
        flex: '0 1 232rpx',
      }
    },
    CanelStyle(){
      return {
        width: '232rpx',
        height: '72rpx',
        background: '#f2f2f2',
        borderRadius: '58rpx',
        color:'#000',
        lineHeight:'72rpx',
        margin:'0 auto',
        marginBottom:'50rpx',
        flex: '0 1 232rpx',
      }
    },
  },
  methods:{
    submit(){
      if(this.title != '核销'){
        if(!this.code){
          return this.$u.toast('请输入物流单号')
        }
        if(this.index == -1){

          return this.$u.toast('请选择物流公司')
        }
      }else {
        if(!this.number){
          return this.$u.toast('请输入核销单号')
        }
      }
      this.$refs.uModal.clearLoading()
      let form = {
        data:this.list[this.index] || '',
        code : this.code,
        number : this.number,
      }
      this.$emit('submit',form)
    },
    closes(){
      this.$emit('close')
    },
    //选择物流
    confirm(e){
      this.index = e
      this.head = this.list[this.index].ename
    },
  }
}
</script>

<style>

</style>
<style scoped lang="scss">

.slot-content{
  position: relative;
  .item{
    padding: 48rpx 0 ;
  }
  .cha{
    position: absolute;
    right: 30rpx;
    top: -80rpx;
    font-size: 38rpx;
    color: #999;
  }
  .input{
    width: 520rpx;
    height: 88rpx;
    background: #F2F2F2;
    opacity: 1;
    border-radius: 58rpx;
    margin: 0 auto;
    padding: 0 46rpx;
    color: #707070;
    font-size: 32rpx;
  }

}
</style>